<template>
    <h1>WatchEffect</h1>
    <div class="container">
        <h2>需求:当水温达到60度或者水位达到80厘米,发出警报.</h2>
        <h2>当前水温:{{temp}}℃</h2>
        <h2>当前水位:{{height}}cm</h2>
        <button @click="tempAdd">水温+10</button>
        <button @click="heightAdd">水位+10</button>
    </div>
</template>

<script setup lang="ts">
import { ref ,watch, watchEffect } from "vue";

let temp = ref(10)
let height = ref(10)

function tempAdd(){
    temp.value += 10
}
function heightAdd(){
    height.value += 10
}

watchEffect(()=>{
    // 这里有个BUG当温度达到60度触发警报的时候,再点击水位,当水位达到80度的时候就不会触发劲爆了就不监听水位了.
    if(temp.value >= 60 || height.value >= 80){
        console.log("发出警报");
    }
})

</script>

<style scoped>
.container{
    background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>